<!--
 * @Author: qiye
 * @LastEditors: qiye
 * @description: page description
 * @Date: 2024-01-17 13:42:07
 * @LastEditTime: 2024-01-18 15:29:55
-->
<script setup lang="ts">
import pageFormUrl from './assets/page-form.png'
import pageFlowUrl from './assets/page-flow.png'
import pageCustomUrl from './assets/page-custom.png'

const props = defineProps({
  helloVisible: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['create'])
</script>

<template>
  <div class="empty-content">
    <div>
      <div v-if="helloVisible" class="row-hello">
        <div class="title">
          <span>欢迎使用</span>
        </div>
        <div class="remark color-secondary">
          <span>现在，从创建第一个页面应用开始，构建应用！</span>
        </div>
      </div>
      <div class="row-card">
        <div class="card-item" @click="emit('create', 'NORMAL')">
          <div class="card-item-content-wrapper">
            <div class="card-item-content">
              <div class="img">
                <el-image :src="pageFormUrl" />
              </div>
              <div class="title">
                <span>新建普通表单</span>
              </div>
              <div class="remark color-secondary">
                <span>数据收集、事件跟进</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="emit('create', 'APPROVE')">
          <div class="card-item-content-wrapper">
            <div class="card-item-content">
              <div class="img">
                <el-image :src="pageFlowUrl" />
              </div>
              <div class="title">
                <span>新建流程表单</span>
              </div>
              <div class="remark color-secondary">
                <span>业务审批、任务协同</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="emit('create', 'CUSTOMIZE')">
          <div class="card-item-content-wrapper">
            <div class="card-item-content">
              <div class="img">
                <el-image :src="pageCustomUrl" />
              </div>
              <div class="title">
                <span>新建自定义页面</span>
              </div>
              <div class="remark color-secondary">
                <span>信息展示及导航、门户页面</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.empty-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .row-hello{
    text-align: center;

    .title{
      font-size: 34px;
    }

    .remark{
      margin-top: 20px;
      font-size: 18px;
    }
  }

  .row-card{
    margin-top: 53px;
    display: flex;

    .card-item{
      width: 368px;
      height: 388px;
      padding: calc(var(--space-normal) * 3);

      &:has(.card-item-content-wrapper:hover){
          padding: calc(var(--space-normal) * 2.5);
          transition: all 0.1s ease-out;
        }

      .card-item-content-wrapper{
        border-radius: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-page-content);

        // box-shadow: var(--shadow-1-down);

        &:hover{
          box-shadow: var(--shadow-1-down);
        }

        .card-item-content{
          text-align: center;

          .img{
            width: 100px;
            height: 100px;
            margin: 0 auto;
          }

          .title{
            margin-top: 30px;
            font-size: 20px;
          }

          .remark{
            margin-top: 18px;
            font-size: 16px;
          }
        }
      }

    }
  }
}
</style>
